<template>
    <a-modal
      :title="title"
      :width="600"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
    >
    <a-spin :spinning="confirmLoading">
      <!-- 应用场景未开发 -->
        <a-table ref="table" rowKey="id"  size="middle" :columns="columns" :dataSource="dataSource"
        :loading="loading" :pagination="ipagination" @change="handleTableChange" v-if="type=='yycj'">
        
      </a-table>
      <div v-if="type=='tf'">
        <div>路径：{{tf.url}}  <span class="copy" @click="handlecopy(tf.url)">复制</span></div>
        <div style="margin-top: 10px;">页面二维码：</div>
        <div><img :src="tf.qrCode" alt="" style="width: 150px;height:150px"></div>
      </div>
    </a-spin>
    </a-modal>
</template>

<script>
import { pagQrcodeSceneLog } from '../../../../../api/marketingCenter/code';
  export default {
    name:'cc',
    components: {},
    // mixins:[JeecgListMixin],
    data() {
      return {
        title: '',
        visible: false,
        tf: {},
        qrCode:'/aaa/bbb/ccc',
        dataSource:[],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
         wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        /* table加载状态 */
        loading: false,
        ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
        columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '调用时间',
          align: "center",
          dataIndex: 'createTime',
        },
        {
          title: '活动名称',
          align: "center",
          dataIndex: 'activityName',
        },
      ],
      type:'',
      record:{},
      }
    },
    created() {
    },
    methods: {
      //分页的事件
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.getList();
    },
        handlecopy(val) {
        var cInput = document.createElement("input");
        cInput.value = val;//复制的内容
        document.body.appendChild(cInput);
        cInput.select();
        document.execCommand("copy");
        this.$message.success('复制成功')
        document.body.removeChild(cInput);
      },
      add() {
        this.edit({})
      },
      edit(record,type) {
        this.record=record
        this.type=type
        if(this.type=='tf'){
          this.title='投放'
          this.tf = Object.assign({}, record)
          this.tf.url ='packages/wm-cloud-jnbyOptionCode/option/index?id='+record.id
          this.visible = true
        }else if(this.type=='yycj'){
            this.title='应用场景'
            this.getList();
        }
      },
      getList(){
        var list={
        current:this.ipagination.current,
        size:this.ipagination.pageSize,
        id:this.record.id
      }
        pagQrcodeSceneLog(list).then(res=>{
              if(res.success){
                this.dataSource = Object.assign([], res.data.records)
                this.total=res.data.total
                this.visible = true
              }
            })
      },
      // 确定
      handleOk() {
        this.close()
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        // this.$emit('close')
        this.fileList = []
        this.visible = false
      },
    }
  }
</script>
<style scoped  lang="less">
.divList{
  border-bottom: 1px solid #ccc;
  padding-left: 34px;
  margin-bottom: 30px;
  position: relative;
}
.bairuidelete{
  position:absolute;
  top: 135px;
  right: 80px;
  width: 20px;
  height: 20px;
}
.copy{
    color:#1890ff;
    border-bottom: 1px solid #1890ff;
}
</style>